.{$px}range
    position: relative
    $top = 25px
    $bottom = 16px
    $line_height = 4px
    $handle_width = 20px
    $handle_height = 20px
    $custom_radius = 4px

    $line_color = #e6e7ed
    $bar_color = clr-primary
    $handle_color_1 = clr-primary
    $handle_color_2 = clr-primary
    $minmax_text_color = #999
    $minmax_bg_color = #e1e4e9
    $label_color_1 = #ed5565
    $label_color_2 = white
    $grid_color_1 = #e1e4e9
    $grid_color_2 = #999
    
    &-price
        visibility: visible
        background-color: #eceef3
        margin-top: 10px
        color: #7c8088
        width: 100%
        display: flex
        line-height: 1.2em
        justify-content: center
        align-items: center
        padding: 5px 20px
        min-height: 58px
        text-transform: uppercase
        font-weight: 500
    &Price
        display: inline-block
        margin-left: 10px

    no-click() {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    pos-r() {
        position: relative;
        display: block;
    }
    
    pos-a() {
        position: absolute;
        display: block;
    }
    .irs {
        pos-r();
        -webkit-touch-callout: none;
        no-click();
        height: 40px
        
    
        &-line {
            pos-r();
            overflow: hidden;
            outline: none !important;
            top: $top;
            height: $line_height;
            background-color: $line_color;
            border-radius: $custom_radius;
        }
    
        &-bar {
            pos-a();
            left: 0;
            width: 0;
            top: $top;
            height: $line_height;
            &:after {
                content:''
                position: absolute
                left: 0px
                right: 0px
                top: 0
                bottom: 0
                display: block
                background-color: $bar_color;
            }
    
            &--single {
                border-radius: $custom_radius 0 0 $custom_radius;
            }
        }
    
        &-shadow {
            position: absolute;
            display: none;
            left: 0;
            width: 0;
            height: 1px;
            bottom: $bottom;
            background-color: $line_color;
        }
    
        &-handle {
            pos-a();
            box-sizing: border-box;
            cursor: default;
            z-index: 1;
            top: 17px;
            width: $handle_width;
            height: $handle_height;
            background-color: transparent;

            & > i:first-child {
                position: absolute;
                display: block;
                top: 50%;
                left: 50%;
                margin-left: -5px
                margin-top: -5px
                width: 9px;
                height: 10px;
                background-color: $handle_color_1;
                &:after {
                    content: ''
                    left: 3px
                    bottom: 3px
                    top: 3px
                    right: 3px
                    position: absolute
                    display: block
                    background: $line_color
                }
            }

            &.state_hover,
            &:hover {
                & > i:first-child {
                    background-color: $handle_color_2;
                }
            }
    
            &.single,
            &.from,
            &.to {}
            
            &.from {
                margin-left: -7px
            }
            &.to {
                margin-left: 8px
            }
    
            &.type_last {
                z-index: 2;
            }
        }
    
        &-min,
        &-max {
            pos-a();
            cursor: default;
            top: 0;
            padding: 1px 3px;
            color: $minmax_text_color;
            line-height: 1.333;
            text-shadow: none;
            display: none
            background-color: $minmax_bg_color;
            border-radius: $custom_radius;
        }
    
        &-min {
            left: 0;
        }
    
        &-max {
            right: 0;
        }
    
        &-from,
        &-to,
        &-single {
            pos-a();
            top: 0;
            left: 0;
            cursor: default;
            white-space: nowrap;
            color: $label_color_2;
            line-height: 1.333;
            display: none
            text-shadow: none;
            padding: 1px 5px;
            background-color: $label_color_1;
            border-radius: $custom_radius;
            &:before {
               position: absolute;
               display: block;
               content: "";
               bottom: -6px;
               left: 50%;
               width: 0;
               height: 0;
               margin-left: -3px;
               overflow: hidden;
               border: 3px solid transparent;
               border-top-color: $label_color_1;
           }
        }
    
        &-grid {
            position: absolute;
            display: none;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
    
            .irs-with-grid & {
                display: block;
            }
    
            &-pol {
                position: absolute;
                top: 0;
                left: 0;
                width: 1px;
                height: 8px;
                background: $grid_color_1;
               
    
                &.small {
                    height: 4px;
                }
            }
    
            &-text {
                position: absolute;
                bottom: 0;
                left: 0;
                white-space: nowrap;
                text-align: center;
                font-size: 9px;
                line-height: 9px;
                padding: 0 3px;
                color: $grid_color_2;
            }
        }
    
        &-disable-mask {
            pos-a();
            top: 0;
            left: -1%;
            width: 102%;
            height: 100%;
            cursor: default;
            background: rgba(0,0,0,0.0);
            z-index: 2;
    
            .lt-ie9 & {
                background: #000;
                filter: unquote('alpha(opacity=0)');
                cursor: not-allowed;
            }
        }
    
        &-disabled {
            opacity: 0.4;
        }
    
        &-hidden-input {
            position: absolute !important;
            display: block !important;
            top: 0 !important;
            left: 0 !important;
            width: 0 !important;
            height: 0 !important;
            font-size: 0 !important;
            line-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden;
            outline: none !important;
            z-index: -9999 !important;
            background: none !important;
            border-style: solid !important;
            border-color: transparent !important;
        }
    }
